import './Card.css'

const Card: React.FC<{ bgStyle?: React.CSSProperties, contentStyle?: React.CSSProperties, style?: React.CSSProperties, bg?: number, title?: string; desc?: string, subTitle?: string, children: React.ReactNode }> = ({ bgStyle, contentStyle, style, bg = 1, title, desc, subTitle, children }) => {
    return (
        <div className="normal-card" style={style}>
            <div className="normal-card-bg" style={bgStyle}>
                {bg === 1 && <img src="/底@3x.png" alt="" style={{ width: '100%', height: '100%' }} />}
                {bg === 2 && <img src="/底2@3x.png" alt="" style={{ width: '100%', height: '100%' }} />}
                {bg === 3 && <img src="/底@3x (2).png" alt="" style={{ width: '100%', height: '100%' }} />}
            </div>


            {title && <div className="normal-card-title">
                {title}
                <div className="normal-card-desc">{desc}</div>
            </div>
            }

            {subTitle && <div className="normal-card-subTitle">
                {subTitle}
            </div>}
            <div className="normal-card-content" style={contentStyle}>{children}</div>
        </div>
    )
}

export default Card